<!DOCTYPE html>
<html>
<head>
    <title>借阅列表</title>
    <link rel="stylesheet" href="${request.contextPath}/resources/layui/css/layui.css">
</head>
<body>
<div style="margin-left: 10px;margin-top: 10px">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">操作者</label>
                <div class="layui-input-inline" style="width: 150px">
                    <select id="handlerId">
                        <option value="">操作者</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">借阅人</label>
                <div class="layui-input-inline" style="width: 150px">
                    <input type="text" class="layui-input" id="rentName" placeholder="借阅人" autocomplete="off">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">电话号码</label>
                <div class="layui-input-inline" style="width: 150px">
                    <input type="text" class="layui-input" id="phone" placeholder="电话号码" autocomplete="off">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">时间</label>
                <div class="layui-input-inline" >
                    <input type="text" class="layui-input" id="createTime" readonly placeholder="创建时间" autocomplete="off">
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn" id="searchBtn">查询</button>
            </div>
        </div>
    </form>
    <hr>
    <table id="dataTable" lay-filter="dataTableFilter"></table>
</div>
<script type="text/html" id="rowBtns">
    {{# if(d.state == 0){}}
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" type="button" lay-event="returnBook">
            <i class="layui-icon layui-icon-release"></i>还书
        </button>
    </div>
    {{# } }}
</script>

<script id="addTpl" type="text/html">
    <form class="layui-form layui-form-pane" lay-filter="addFormFilter" style="margin-top: 15px;margin-left: 15px">
        <div class="layui-form-item" >
            <label class="layui-form-label">图书ID</label>
            <div class="layui-input-inline">
                <input type="text" name="bookId" readonly class="layui-input" autocomplete="off" placeholder="图书ID" lay-verify="required" lay-reqText="图书ID不能为空" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">还书时间</label>
            <div class="layui-input-inline">
                <input type="text" name="returnTime" id="returnTime" readonly class="layui-input" autocomplete="off"
                       placeholder="还书时间" lay-verify="required" lay-reqText="还书时间不能为空">
            </div>
        </div>

        <div class="layui-form-item layui-form-text" style="width: 300px">
            <label class="layui-form-label">心得</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="mean" placeholder="读书心得"></textarea>
            </div>
        </div>
        <button type="button" lay-submit id="subBtn" lay-filter="subBtnFilter" style="display: none"></button>
    </form>
</script>


<script src="${request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['form', 'table', 'jquery', 'layer','upload','laydate'], function () {
        let cxt = "${request.contextPath}";
        let form = layui.form;
        let table = layui.table;
        let $ = layui.jquery;
        let layer = layui.layer;
        let upload = layui.upload;
        let laydate = layui.laydate;

        //初始化时间范围选择器
        laydate.render({
            elem:"#createTime",
            range:"~"
        });

        let tabOpt = {
            elem: "#dataTable",
            id: "dataTableId",
            url: cxt + "/bookRent/page.do",
            toolbar:"#headerBtns",
            cols: [[
                {field: "rentId",title: "借阅ID", hide:true},
                {field: "bookId", title: "ID"},
                {field: "bookName", title: "书名"},

                {field: "rentName", title: "借阅者"},
                {field: "phone", title: "借阅者号码",minWidth:120},
                {field: "beginTime", title: "借书时间",minWidth:220, templet: function (d) {
                        let beginTime = d.beginTime;
                        let endTime = d.endTime;
                        return beginTime +" ~ "+endTime;
                    }
                },
                {
                    field: "state", title: "状态", templet: function (d) {
                        let state = d.state;
                        if (state == 0) {
                            return "未归还";
                        } else if (state == 1) {
                            return "已归还";
                        }
                    }
                },
                {field: "handlerId", title: "操作人"},
                {field: "createTime", title: "借阅时间",minWidth:150},
                {title: "操作",toolbar:"#rowBtns",minWidth:100,fixed:"right"}
            ]],
            page: true,
            parseData: function (rs) {
                if (rs.code == 200) {
                    return {
                        code: rs.code,
                        msg: rs.msg,
                        count: rs.data.total,
                        data: rs.data.records
                    }
                }
            },
            response: {
                statusCode: 200
            }
        };
        //渲染数据表格
        let tabIns = table.render(tabOpt);
        //搜索
        $("#searchBtn").click(function (){
            let userId = $("#userId").val();
            let name = $("#name").val();
            let idCard = $("#idCard").val();
            let createTime = $("#createTime").val();

            tabIns.reload({
                where:{
                    userId:userId,
                    name:name,
                    idCard:idCard,
                    createTime:createTime,
                }
            })
        });
        //行工具栏事件
        table.on("tool(dataTableFilter)",function (d){
            let event = d.event;
            let rowData = d.data;
            if(event == "returnBook"){
                //调用具体的重置请求
                returnBook(rowData);
            }
        })

        /**
         * 还书
         * @param rowData
         */
        function  returnBook(rowData){
            let layerOpt = {
                title:"还书",
                type:1,
                content:$("#addTpl").html(),
                area:['330px','560px'],
                btn:['确认','取消'],
                btnAlign:'c',
                anim:4,
                success:function (layero,index){
                    //渲染表单
                    form.render();
                    form.val("addFormFilter",rowData);
                    //渲染还车时间
                    laydate.render({
                        elem:"#returnTime"
                    })
                    //设置表单提交监听事件
                    form.on("submit(subBtnFilter)",function (d){
                        let formData = d.field;
                        formData.rentId = rowData.rentId;//为借书ID 赋值
                        console.log()
                        //进行ajax提交
                        $.post(cxt+"/bookReturn/return.do",formData,function (rs){
                            layer.msg(rs.msg);
                            if(rs.code != 200){
                                return false;
                            }
                            //刷新表格
                            $("#searchBtn").click();
                            //关闭弹层
                            layer.close(index);
                        });

                        return false;//阻止默认提交行为
                    });
                },
                yes:function (index,layero){
                    $("#subBtn").click();
                }
            };
            layer.open(layerOpt);
        }

    })
</script>
</body>
</html>
